<template>
  <div class="party-activities-staff">
    <div class="page-header">
      <h1 class="page-title">组织生活记录</h1>
      <p class="page-subtitle">在线填报参与组织生活信息</p>
    </div>

    <div style="margin-bottom: 16px">
      <el-button type="success" @click="exportData">
        <el-icon><Download /></el-icon>
        导出数据
      </el-button>
      <el-button type="primary" style="margin-left: 8px" @click="openCreate">记录活动</el-button>
    </div>

    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="activityDate" label="日期" width="120" />
        <el-table-column prop="activityType" label="类型" width="120" />
        <el-table-column prop="activitySubject" label="主题" min-width="220" show-overflow-tooltip />
        <el-table-column prop="location" label="地点" min-width="160" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="view(row)">查看</el-button>
            <el-button size="small" type="primary" @click="edit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="showDialog" :title="isEdit ? '编辑活动' : '记录组织生活'" width="720px">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="活动类型" prop="activity_type">
          <el-select v-model="form.activity_type" style="width: 100%">
            <el-option label="三会一课" value="三会一课" />
            <el-option label="主题党日" value="主题党日" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动主题" prop="activity_subject">
          <el-input v-model="form.activity_subject" />
        </el-form-item>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="日期" prop="activity_date">
              <el-date-picker v-model="form.activity_date" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点" prop="location">
              <el-input v-model="form.location" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="缺席说明">
          <el-input v-model="form.absence_notes" type="textarea" :rows="2" placeholder="可选：缺席人员姓名及原因" />
        </el-form-item>
        <el-form-item label="活动记录">
          <el-input v-model="form.activity_record" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submit">{{ isEdit ? '保存' : '提交' }}</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="showView" title="查看活动" width="700px">
      <el-descriptions :column="1" border v-if="current">
        <el-descriptions-item label="日期">{{ current.activityDate }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ current.activityType }}</el-descriptions-item>
        <el-descriptions-item label="主题">{{ current.activitySubject }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ current.location || '-' }}</el-descriptions-item>
        <el-descriptions-item label="缺席说明">{{ current.absenceNotes || '-' }}</el-descriptions-item>
        <el-descriptions-item label="活动记录">{{ current.activityRecord || '-' }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="showView = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
import { listActivities, createActivity, updateActivity, deleteActivity, getActivity } from '@/api/party'

const list = ref([])
const showDialog = ref(false)
const isEdit = ref(false)
const showView = ref(false)
const formRef = ref()
const submitting = ref(false)
const current = ref(null)

const form = reactive({
  activity_type: '',
  activity_subject: '',
  activity_date: '',
  location: '',
  absence_notes: '',
  activity_record: ''
})

const rules = {
  activity_type: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
  activity_subject: [{ required: true, message: '请输入主题', trigger: 'blur' }],
  activity_date: [{ required: true, message: '请选择日期', trigger: 'change' }]
}

const openCreate = () => {
  isEdit.value = false
  Object.assign(form, { activity_type: '', activity_subject: '', activity_date: '', location: '', absence_notes: '', activity_record: '' })
  showDialog.value = true
}

const load = async () => {
  const res = await listActivities({})
  list.value = res?.data || res || []
}

const submit = async () => {
  try {
    if (!formRef.value) return
    await formRef.value.validate()
    submitting.value = true
    if (!isEdit.value) {
      await createActivity(form)
      ElMessage.success('提交成功')
    } else {
      await updateActivity(current.value.id, form)
      ElMessage.success('保存成功')
    }
    showDialog.value = false
    await load()
  } catch (e) {
    if (e !== 'cancel') ElMessage.error(e?.response?.data || e?.message || '提交失败')
  } finally {
    submitting.value = false
  }
}

const view = async (row) => {
  const res = await getActivity(row.id)
  const data = res?.data || res
  current.value = data?.activity || row
  showView.value = true
}

const edit = (row) => {
  isEdit.value = true
  current.value = row
  Object.assign(form, {
    activity_type: row.activityType,
    activity_subject: row.activitySubject,
    activity_date: row.activityDate,
    location: row.location,
    absence_notes: row.absenceNotes,
    activity_record: row.activityRecord
  })
  showDialog.value = true
}

const remove = async (row) => {
  try {
    await ElMessageBox.confirm('确定删除该记录吗？', '提示', { type: 'warning' })
    await deleteActivity(row.id)
    ElMessage.success('已删除')
    await load()
  } catch (e) {
    if (e !== 'cancel') ElMessage.error(e?.response?.data || e?.message || '删除失败')
  }
}

const exportData = async () => {
  const { exportData: exportUtil } = await import('@/utils/exportUtils')
  
  const filters = {}
  
  await exportUtil('party-activities', filters, '组织生活记录列表.xlsx')
}

load()
</script>

<style scoped>
</style> 